<template>
  <div class="equ-time-booking">
    <HeaderView />
    <!-- <HeaderView /> -->

    <ContentHeaderWithTitle title="仪器预约" />
    <div class="equ-time-booking-content">
      <div class="equ-card">
        <div class="equ-card-img">
          <img :src="require('../../assets/images/equ-demo.png')" />
        </div>
        <div class="equ-card-content">
          <div class="name">双探头低真空场发射扫描电镜</div>
          <div class="model">Apreo,LoVac 30kv</div>
          <div class="org">石油地质实验研究中心</div>
        </div>
      </div>

      <div class="i-h3">预约单位</div>
      <div class="unit-card-wrapper">
        <unit-card
          tag="院内"
          title="北京石油地质实验研究中心"
          name="王晓蕾"
          phone="18615508558"
          email="wangxiaolei@cnpc.com.cn"
          :is-active="true"
        />

        <div class="i-text-btn">更改送检单位</div>
      </div>

      <div class="form-wrapper i-form">
        <van-form @submit="onSubmit" label-align="top">
          <van-field
            v-model="name"
            label="实验内容"
            :required="true"
            placeholder="请输入实验内容"
          />

          <van-field
            v-model="result"
            readonly
            name="picker"
            label="样品类别"
            placeholder="请选择类别"
            @touchstart.stop="showPicker = true"
            :required="true"
          >
            <template #right-icon>
              <span class="material-symbols-outlined"> arrow_drop_down </span>
            </template>
          </van-field>
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>

          <van-field
            readonly
            name="picker"
            label="检测项目"
            :placeholder="result1 && result1.length ? '' : '请选择检测项目'"
            @touchstart.stop="showPicker1 = true"
            :required="true"
          >
            <template #right-icon>
              <div class="multi-value-wrapper">
                <div
                  class="multi-value"
                  v-for="(item, index) in result1"
                  :key="item"
                >
                  {{ item?.text }}
                  <span
                    class="close-btn"
                    @touchstart.stop="() => handleClickClose(item, index)"
                  >
                    <span class="material-symbols-outlined"> close </span>
                  </span>
                </div>
              </div>
              <span class="material-symbols-outlined"> arrow_drop_down </span>
            </template>
          </van-field>
          <van-popup v-model:show="showPicker1" position="bottom">
            <van-multi-picker
              :onCancel="() => (showPicker1 = false)"
              :onConfirm="handleConfirm1"
              :columns="[
                { text: '项目1', value: 'a' },
                { text: '项目2', value: 'b' },
              ]"
            />
          </van-popup>

          <van-field
            v-model="result2"
            readonly
            name="picker"
            label="样品状态"
            placeholder="请选择样品状态"
            @touchstart.stop="showPicker2 = true"
          >
            <template #right-icon>
              <span class="material-symbols-outlined"> arrow_drop_down </span>
            </template>
          </van-field>
          <van-popup v-model:show="showPicker2" position="bottom">
            <van-picker
              :columns="[
                { text: '状态1', value: 'a' },
                { text: '状态2', value: 'b' },
              ]"
              @confirm="handleConfirm2"
              @cancel="showPicker2 = false"
            />
          </van-popup>

          <van-field
            v-model="sampleNum"
            label="样品数量"
            placeholder="请输入样品数量"
            @touchstart.stop="showSampleNumKB = true"
            readonly
            class="i-number-input"
          >
            <template #right-icon>
              <div class="number-input-control-wrapper">
                <div
                  class="number-input-control left"
                  @touchstart.stop="
                    () => (sampleNum = parseInt(sampleNum || 0) - 1)
                  "
                >
                  <span class="material-symbols-outlined"> remove </span>
                </div>
                <div
                  class="number-input-control right"
                  @touchstart.stop="
                    () => (sampleNum = parseInt(sampleNum || 0) + 1)
                  "
                >
                  <span class="material-symbols-outlined"> add </span>
                </div>
              </div>
            </template>
          </van-field>
          <van-number-keyboard
            v-model="sampleNum"
            :show="showSampleNumKB"
            :maxlength="6"
            @blur="showSampleNumKB = false"
          />

          <van-field
            readonly
            name="picker"
            label="预约日期"
            :placeholder="result3 && result3.length ? '' : '请选择预约日期'"
            @touchstart.stop="showPicker3 = true"
            :required="true"
          >
            <template #right-icon>
              <div class="multi-value-wrapper">
                <div
                  class="multi-value"
                  v-for="(item, index) in result3"
                  :key="item"
                >
                  {{ item?.text }}
                  <span
                    class="close-btn"
                    @touchstart.stop="() => handleClickClose3(item, index)"
                  >
                    <span class="material-symbols-outlined"> close </span>
                  </span>
                </div>
              </div>
              <div class="border-icon-wrapper">
                <span
                  class="material-symbols-outlined"
                  style="color: #0571b0; font-size: 20px"
                >
                  today
                </span>
              </div>
            </template>
          </van-field>
          <van-popup v-model:show="showPicker3" position="bottom">
            <van-multi-picker
              :onCancel="() => (showPicker3 = false)"
              :onConfirm="handleConfirm3"
              :columns="[
                { text: '10月20日 上午', value: 'a' },
                { text: '10月20日 下午', value: 'b' },
                { text: '10月21日 上午', value: 'c' },
                { text: '10月21日 下午', value: 'd' },
                { text: '10月22日 上午', value: 'e' },
                { text: '10月22日 下午', value: 'f' },
              ]"
            />
          </van-popup>

          <van-field v-model="bookingTime" label="已预约小时" :disabled="true">
            <template #right-icon>
              <div class="border-icon-wrapper" style="width: 48px; padding: 0">
                小时
              </div>
            </template>
          </van-field>

          <van-field v-model="estCost" label="预估费用" :disabled="true">
            <template #right-icon>
              <div class="border-icon-wrapper" style="width: 48px">元</div>
            </template>
          </van-field>

          <van-field
            name="radio"
            label="是否出具报告"
            :required="true"
            class="no-bordered"
          >
            <template #input>
              <VanH5Radio
                :value="checked2"
                :onChange="(value) => (checked2 = value)"
                :items="[
                  { label: '是', value: 'a' },
                  { label: '否', value: 'b' },
                ]"
              />
            </template>
          </van-field>
          <div class="van-form-help--info">
            提示：选择邮寄后，我们会把样品邮寄回送样单位
          </div>

          <van-field
            v-model="remark"
            rows="3"
            autosize
            label="备注"
            type="textarea"
            placeholder=""
          />
        </van-form>
      </div>
    </div>
    <div class="equ-time-booking-footer sticky-footer">
      <van-button
        plain
        color="#0571b0"
        style="
          border-radius: 0;
          border: 0;
          height: 100%;
          background: transparent;
        "
        @touchstart.stop="$router.back()"
        >取消预约</van-button
      >
      <van-button
        color="#ff0000"
        style="border-radius: 0; height: 100%; width: 9.2rem"
        >立即预约</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ContentHeaderWithTitle from '@/components/ContentHeaderWithTitle.vue'
import VanMultiPicker from '@/components/Form/VanMultiPicker.vue'
import UnitCard from './UnitCard'
import VanH5Radio from '@/components/Form/VanH5Radio.vue'
import HeaderView from '@/components/Layout/HeaderView.vue'

const name = ref('')
const result = ref('')
const sampleNum = ref('')
const bookingTime = ref(8)
const estCost = ref('5,203')
const showSampleNumKB = ref(false)
const result1 = ref([
  {
    text: '项目1',
    value: 'a',
  },
])
const result2 = ref('')
const result3 = ref([
  { text: '10月20日 上午', value: 'a' },
  { text: '10月20日 下午', value: 'b' },
])
const showPicker = ref(false)
const showPicker1 = ref(false)
const showPicker2 = ref(false)
const showPicker3 = ref(false)
const checked2 = ref('a')
const remark = ref('')
const columns = [
  { text: '类别1', value: 'a' },
  { text: '类别2', value: 'b' },
]

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text
  showPicker.value = false
}

const handleConfirm1 = (value) => {
  result1.value = value
}
const handleConfirm2 = ({ selectedOptions }) => {
  result2.value = selectedOptions[0]?.text
  showPicker2.value = false
}
const handleConfirm3 = ({ selectedOptions }) => {
  result3.value = selectedOptions[0]?.text
  showPicker3.value = false
}

const handleClickClose = (item, index) => {
  result1.value.splice(index, 1)
}
const handleClickClose3 = (item, index) => {
  result1.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.equ-time-booking {
  position: relative;

  &-footer {
    height: dpi(10rem);
    position: fixed;
    bottom: 0;
    width: 100%;

    display: flex;
    justify-content: flex-end;
    background-color: #f5f5f5;
    box-shadow: 0rem 0rem 5rem 0rem rgba(0, 0, 0, 0.15);
  }
  &-content {
    width: calc(100% - dpi(8rem));
    padding-bottom: dpi(10rem);

    margin: dpi(-8rem) auto 0;

    .i-h3 {
      margin-top: dpi(4rem);
      margin-bottom: dpi(3rem);
    }
  }
  .unit-card-wrapper {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    .i-text-btn {
      margin-top: dpi(2rem);
    }
  }

  .form-wrapper {
    width: 100%;
  }

  .equ-card {
    width: 100%;
    height: dpi(25rem);
    background-color: #ffffff;
    box-shadow: 0rem 1rem 3rem 0rem rgba(5, 32, 77, 0.1);
    display: flex;
    padding: dpi(3rem);
    &-img {
      height: calc(dpi(25rem) - dpi(6rem));
      > img {
        height: 100%;
      }
    }
    &-content {
      margin-left: dpi(4rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name {
        font-size: dpi(3rem);
        color: #05204d;
        font-weight: bold;
        margin-bottom: dpi(2rem);
      }
      .model {
        font-size: dpi(2.4rem);
        color: #0571b0;
        margin-bottom: dpi(1rem);
      }
      .org {
        font-size: dpi(2.4rem);
        color: #888;
      }
    }
  }

  .addr-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    height: dpi(13rem);
    padding: dpi(2.2rem) dpi(3rem);

    .addr-content {
      line-height: 20px;

      p {
        margin: 0;
        font-family: PingFangSC-Regular;
        font-size: dpi(2rem);
        line-height: dpi(3rem);
        letter-spacing: 0px;
        color: #565656;
      }
    }
    .copy-icon {
      .material-symbols-outlined {
        font-size: dpi(2.2rem);
        color: #0571b0;
        cursor: pointer;
      }
    }
  }

  ::v-deep {
    .van-field--disabled {
      .van-field__value {
        background: #f5f5f5;

        .border-icon-wrapper {
          color: rgba(51, 51, 51, 0.5);
        }
      }
    }
  }

  // 带border的右侧icon样式定制
  .border-icon-wrapper {
    position: absolute;
    padding: 0 dpi(2rem);
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    border-left: 1px solid #ddd;
  }

  .i-number-input {
    ::v-deep {
      .van-field__value {
        padding-left: dpi(8rem) !important;
        padding-right: dpi(8rem) !important;
        input {
          text-align: center;
        }
      }
    }

    // 数字键盘样式定制
    .number-input-control-wrapper {
      .number-input-control {
        position: absolute;
        width: dpi(8rem);
        height: 100%;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        > span {
          color: #05204d;
          opacity: 0.5;
          font-size: dpi(3.2rem);
        }
        &.left {
          left: 0;
          border-right: 1px solid #ddd;
        }
        &.right {
          right: 0;
          border-left: 1px solid #ddd;
        }
      }
    }
  }
}
</style>
